<template>
  <a-drawer
    v-model:visible="flowDetailVisible"
    title="详情"
    width="1000px"
    unmount-on-close
    @cancel="close"
  >
    <!--流程信息-->
    <a-descriptions
      bordered
      align="left"
      layout="vertical"
      :column="2"
      :data="instanceDetail"
    />

    <!-- 流程状态 -->
    <process-status :process-status="currentInstance.status" />

    <!--表单数据-->
    <a-card title="表单数据" :loading="formLoading">
      <form-render
        ref="flowDetailFormRef"
        v-model:model="formModel"
        :form-disable="true"
        :form-config="formConfig"
        :form-list="formList"
      />
    </a-card>

    <!--当前任务-->
    <card-ing-task
      v-if="currentInstance.flowTaskList && currentInstance.flowTaskList.length > 0"
      :flow-task-list="currentInstance.flowTaskList"
    />

    <!--审批记录-->
    <card-history
      v-if="currentInstance.processInstanceId"
      :process-instance-id="currentInstance.processInstanceId"
    />

    <!--流程图-->
    <card-flow-graph
      v-if="currentInstance.flowProcess && currentInstance.flowProcess.processData"
      :process-instance-id="currentInstance.processInstanceId"
      :process-data="currentInstance.flowProcess.processData"
    />
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { detailForm } from '@/api/system/form';
import { detailInstance, FlowInstance } from '@/api/flow/instance';
import { Message } from '@arco-design/web-vue';
import ProcessStatus from '@/views/flow/common/components/process-status.vue';
import FormRender from '@/components/form-render/index.vue';
import CardIngTask from '@/views/flow/common/components/card-ing-task.vue';
import CardHistory from '@/views/flow/common/components/card-history.vue';
import CardFlowGraph from '@/views/flow/common/components/card-flow-graph.vue';

const flowDetailVisible = ref(false);

const currentInstance = ref<FlowInstance>({
  instanceId: '',
  processId: '',
  processInstanceId: '',
  bizNumber: '',
  formModel: undefined,
  startUserId: undefined,
  status: '',
  processName: '',
  startUserName: '',
  createTime: '',
  endTime: '',
  flowTaskList: [],
  flowProcess: undefined
});

const instanceDetail = ref<Array<any>>([]);

const formLoading = ref(false);

const flowDetailFormRef = ref();

const formModel = ref({});

const formConfig = ref();

const formList = ref();

const initInstanceDetail = () => {
  instanceDetail.value = [];
  instanceDetail.value.push({
    label: '流程名称',
    value: currentInstance.value.processName
  });
  instanceDetail.value.push({
    label: '发起人',
    value: currentInstance.value.startUserName
  });
  instanceDetail.value.push({
    label: '发起时间',
    value: currentInstance.value.createTime
  });
  instanceDetail.value.push({
    label: '结束时间',
    value: currentInstance.value.endTime ? currentInstance.value.endTime : '--'
  });
};

const getFormDetail = (formId: string) => {
  formLoading.value = true;
  detailForm(formId).then(formRes => {
    formConfig.value = formRes.data.formConfig;
    formList.value = formRes.data.formList;
  }).finally(() => {
    formLoading.value = false;
  });
};

const open = (record: FlowInstance) => {
  if (!record.instanceId) {
    Message.warning('流程实例Id为空');
    return;
  }
  flowDetailVisible.value = true;
  nextTick(() => {
    flowDetailFormRef.value.clearValidate();
  });
  detailInstance(record.instanceId).then(res => {
    currentInstance.value = res.data;
    formModel.value = res.data.formModel;
    initInstanceDetail();
    if (res.data.flowProcess.formId) {
      getFormDetail(res.data.flowProcess.formId);
    }
  });
};

const cancel = () => {
  flowDetailVisible.value = false;
};

defineExpose({
  open,
  cancel
});

</script>

<script lang="ts">
export default {
  name: 'DrawerDetail'
};
</script>

<style scoped lang="less">

</style>